<template>
    <div>
        <h1>User Invest</h1>
        <table class="table table-bordered">
    <tr>
        <td>项目名称</td>
        <td>{{ state.I_Name }}</td>
    </tr>
    <tr>
        <td>投资总金额</td>
        <td>{{ state.I_Budget }}</td>
    </tr>
    <tr>
        <td>已投金额</td>
        <td>{{ state.I_Receive }}</td>
    </tr>
    <tr>
        <td>剩余金额</td>
        <td>{{ state.I_Residue }}</td>
    </tr>
    <tr>
        <td>投资金额</td>
        <td><input type="text" v-model="UMoney" /></td>
    </tr>
    <!--
    <tr v-if="UMoney!=''">
        <td>预期最高收益</td>
        <td>{{ Maxmoney }}</td>
    </tr>-->
    <tr>
        <td></td>
        <td><input type="button" value="添加" @click="add" class="btn btn-primary" /></td>
    </tr>
    
</table>
    </div>
</template>

<script setup lang="ts">
//watch监听
import{reactive,ref,toRefs,onMounted,watch} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import {useUserStore} from '../../store/User'
import axios from 'axios'


const useUserStores=useUserStore();

let router=useRouter()
let route=useRoute()

let data:any=reactive({
    state:{
    },
    Maxmoney:'',
    UMoney:'',
})
let {state,Maxmoney,UMoney}=toRefs(data)
onMounted(()=>{
    fan();
})
//反填
const fan=()=>{
    axios.get('/api/Invest/GetInvestitem',{
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        state.value=res.data.data;     
    })
    .catch(err=>{
        console.log(err);
    })
}
const add=()=>{
    if(UMoney.value=='')
    {
        alert('请输入投资金额');
        return;
    }
    if(isNaN(Number(UMoney.value)))
    {
        alert('投资金额必须为数字');
        return;
    }
    if(UMoney.value>state.value.I_Residue)
    {
        alert('投资金额不能大于项目总金额');
        return;
    }
    //1,创建一个实体类存储信息（U_Id,I_Id,Umoney,UI_Date）
    //2,前端需要向后端传递这些数据
    axios.post('/api/Invest/PostAdduserInvest',{
        data:{
            U_Id:useUserStores.userInfo.U_Id, //用户投资Id
            I_Id:route.query.id,
            UI_Money:UMoney.value
        }
    })
    .then(res=>{
       console.log(res);   
        if(res.data.data>0){
            alert('投资成功');
            router.push('/userInvestList')
        }
        else if(res.data.data==-1){
            alert('投资金额不能大于总投资金额');
            return;
        }
        else{
            alert('投资失败');
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
 
//watch(UMoney,(newVal,oldVal)=>{
    //console.log(newVal,oldVal);
  //  Maxmoney.value=(Number(newVal)*0.06) .toFixed(2)+'CNF'
//})
</script>

<style>

</style>